<template>
    <div class="home-box" @scroll="scrollEvt">
        <van-back-top right="10vw" bottom="10vh" />
        <van-sticky>
            <header>
                <i class="iconfont icon-jiance-1 "></i>
                <div class="search">
                    <input type="text" placeholder="输入名称搜索">
                    <span class="iconfont icon-sousuo"></span>
                </div>
                <i class="iconfont icon-a-gengduoheng"></i>
            </header>
        </van-sticky>

        
        <main>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="it in bannerList" :key="it.id">
                    <img :src="baseURL + it.path" alt="">
                </van-swipe-item>
            </van-swipe>

            <div class="types">
                <div class="item"
                @click="router.push('/all')">
                    <i class="iconfont icon-lifebuoy"></i>
                    <span>全部商品</span>
                </div>
                <div class="item"
                    @click="toHot"
                >
                    <i class="iconfont icon-brightness"></i>
                    <span>人气商品</span>
                </div>
                <div class="item">
                    <i class="iconfont icon-plus"></i>
                    <span>新品上市</span>
                </div>
                <div class="item" @click="router.push('/myOrder')">
                    <i class="iconfont icon-invoice"></i>
                    <span>我的订单</span>
                </div>
                
            </div>
            <div class="products" v-for="it in homeProductsList" :key="it.id">
                <img :src="baseURL + it.path" alt="">
                <div class="rig">
                    <div class="title">{{ it.title }}</div>
                    <p>￥<span>{{ it.price }}</span></p>
                    <van-button @click="addCart(it)">
                        立即购买
                    </van-button>
                </div>
            </div>
        </main>
        <div class="loading-box">
            <div v-if="hasMore">上滑加载更多商品</div>
            <div v-else-if="loading">
                <van-loading type="spinner" color="#33d900" />
            </div>
            <div v-else>已经到底啦！</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { showToast } from "vant";
import { Ref, ref } from "vue";
import { useRouter } from "vue-router";
import { addProductApi } from "../../apis/cartApis";
import { getBannerApi, getHomeProductsApi } from "../../apis/productApis";
import { useCommonStore } from "../../store";
import { userAddressApi } from "../../apis/addressApis";
const bannerList:Ref<Array<any>> = ref([])
const baseURL = window.baseURL;
getBannerList()
async function getBannerList(){
    let _res = await getBannerApi()
    if(_res.code === 200){
        bannerList.value = _res.data
    }
}
/** 推荐商品数据 */
const homeProductsList:Ref<Array<any>> = ref([])
const page:Ref<number> = ref(1)
getHomeProductsList()
async function getHomeProductsList(){
    let _res = await getHomeProductsApi(page.value,6)
    // console.log(_res)
    if(_res.code === 200){
        hasMore.value = _res.data.total > page.value * 6
        homeProductsList.value = [...homeProductsList.value,..._res.data.rows]
    }
    loading.value = false
} 

/** 页面滚动触发加载数据事件 */ 
const hasMore:Ref<boolean> = ref(true)
const loading:Ref<boolean> = ref(true)

function scrollEvt(evt:Event){
    // console.log('---------------1')
    let _tar:HTMLDivElement = evt.target as HTMLDivElement
    const toBottom:boolean =  _tar.scrollHeight - _tar.clientHeight - _tar.scrollTop <= 100
    if(toBottom && !loading.value && hasMore.value){
        loading.value = true
        page.value += 1
        setTimeout(()=>{
            getHomeProductsList()
        },200)
    } 
}


/** 添加购物车事件 */ 
// const addProduct:Ref<CartList> = ref({
//     userId:String,
//     id: String,
//     price: String,
//     time: String,
//     count: '1',
//     name: String,
//     detailaddress: String,
//     bgUrl: String,
// })
// 获取我的收获地址数据
const uid:string = useCommonStore().userInfo.id
const address:Ref = ref('')
const id:Ref = ref('')
getAddressList()
async function getAddressList(){
  let _res = await userAddressApi(uid)
  if(_res.code === 200){
    address.value = _res.data[0].address
    id.value = _res.data[0].phone
  }
}

// 添加到购物车 
async function addCart(it:any){
    let _res = await addProductApi({
        userId: id.value,
        id:it.id,
        price:it.price,
        time:Date.now(),
        count:'1',
        name:it.title,
        detailaddress:address.value,
        bgUrl:it.path
    })
    if(_res.code === 200){
        showToast('添加购物车成功！')
    }
    
}

const router = useRouter()
function toHot(){
    router.push('/hot')
}
</script>
<style lang="less" scoped>
@import url('../../style/comon.less');
@pad:12px;
.home-box{
     .rel();
     overflow-x: hidden;
     background-color: #fff;
     height: calc(100% - 8vh);
     &::v-deep .van-back-top{
        background-color: @g5 ;
     }
     header{
        width: 100%;
        display: flex;
        height: 61px;
        justify-content: space-between;
        align-items: center;
        padding: 0 @pad;
        background-color: #fff;
        i{
            flex: 0 0 40px;
            font-size: 1rem;
            color: @b1;
        }
        .icon-a-gengduoheng{
            font-weight: bold;
            font-size: 1.6rem;
            margin-left: 4px;
        }
        .search{
            flex: 1;
            width: 0;
            height: 58%;
            position: relative;
            display: flex;
            justify-content: center;
            border-radius: 10px;
            background-color:  #f8f8f8;
            input{
                border: none;
                outline: none;
                background-color: #f8f8f8;
                font-size: .7rem;
                text-indent: 16px;
                flex: 1;
            }
            span{
                align-self: center;
                position: absolute;
                right: 6px;
                color: @b1;
                font-size: 1rem;
            }
        }
     }
     main{
        height: calc(100% - 61px - 8vh);
        // overflow-x: hidden;
        padding: 0px 3px;
        &::v-deep .van-swipe__track{
            width: 100%;
            height: 20vh;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .types{
            height: 70px;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin: 10px 0px;
            background-color: @g1;
            .item{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #a1a1a1;
                i{
                    font-size: 1.5rem;
                    color: @b1;
                }
                span{
                    font-size: .6rem;
                    margin-top: 3px;
                }
            }
        }
        .products{
            width: 100%;
            position: relative;
            display: flex;
            padding: 15px;
            // justify-content: space-evenly;
            border-bottom: 1px solid rgb(218, 218, 218);
            img{
                height: 120px;
            }
           .rig{
            position: relative;
            height: 120px;
            margin-left: 20px;
            .title{
                height: 40px;
                font-size: .75rem;
                font-weight: 500;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                color: rgb(75, 75, 75);
                }
                p{
                    font-size: .8rem;
                    line-height: 40px;
                    font-weight: bold;
                    color: @b1;
                }
                &::v-deep .van-button{
                    position: absolute;
                    width: 90px;
                    height: 36px;
                    background-color: @g2;
                    font-size: .65rem;
                    color: #706b6b;
                    bottom: 0;
                    border: none;
                }
           }
        }
    }
    .loading-box{
        position: fixed;
        display: block;
        bottom:0;
    }
}

</style>